<template>
  <div>
    <!-- 整个容器 -->
    <el-container>
      <!-- 上半部分：顶栏 -->
      <el-header class="layout-header">
        <!-- 显示当前登录的用户信息 -->
        <div class="login-user">
          <span class="welcome">欢迎回来，<b>{{ loginUser.username }}</b>！</span>
            <el-dropdown @command="handleCommand">
              <el-avatar size="medium" :src="loginUser.avatar"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-finance"
                                  command="openEditInfoDialog">修改资料
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-s-custom"
                                  command="openEditAvatarDialog">修改头像
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-s-cooperation"
                                  command="openEditPasswordDialog">修改密码
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-remove" divided
                                  command="openLogoutConfirm">退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </div>
        <!-- 左侧的标题文字 -->
        <h1>StarPetHouse宠屋管理平台</h1>

      </el-header>
      <!-- 下半部分 -->
      <el-container class="layout-body">
        <!-- 下半部分的左侧：侧边栏 -->
        <el-aside class="layout-aside">
          <el-menu
                  router
                  :default-active="activeMenuItemPath"
                  class="el-menu-vertical-demo"
                  background-color="cadetblue"
                  text-color="#fff"
                  active-text-color="#fff">
            <!-- 首页 -->
            <el-menu-item index="/sys-admin/product/home">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <!-- 商品管理 -->
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/sys-admin/product/spu-management">
                <i class="el-icon-s-grid"></i>
                <span slot="title">SPU台账</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/product/spu/add-new-1">
                <i class="el-icon-circle-plus"></i>
                <span slot="title">新增SPU</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/product/album">
                <i class="el-icon-picture"></i>
                <span slot="title">相册管理</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/product/category">
                <i class="el-icon-s-unfold"></i>
                <span slot="title">商品类别</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/product/attributeTemplate">
                <i class="el-icon-s-flag"></i>
                <span slot="title">属性模板</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/product/attribute">
                <i class="el-icon-s-ticket"></i>
                <span slot="title">属性管理</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/product/brand">
                <i class="el-icon-s-data"></i>
                <span slot="title">品牌管理</span>
              </el-menu-item>
            </el-submenu>
            <!-- 客户管理 -->
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>客户管理</span>
              </template>
              <el-menu-item index="/sys-admin/client/client">
                <i class="el-icon-user"></i>
                <span slot="title">客户列表</span>
              </el-menu-item>
            </el-submenu>
            <!-- 订单管理 -->
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/sys-admin/product/order">
                <i class="el-icon-s-goods"></i>
                <span slot="title">订单列表</span>
              </el-menu-item>
            </el-submenu>
            <!-- 营销管理 -->
            <el-submenu index="45">
              <template slot="title">
                <i class="el-icon-s-management"></i>
                <span>营销管理</span>
              </template>
              <el-menu-item index="5-1" disabled>
                <i class="el-icon-error"></i>
                <span slot="title">暂无内容</span>
              </el-menu-item>
            </el-submenu>
            <!-- 商家管理 -->
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span>宠物管理</span>
              </template>
              <el-menu-item index="/sys-admin/product/pet">
                <i class="el-icon-error"></i>
                <span slot="title">宠物列表</span>
              </el-menu-item>

              <el-menu-item index="/sys-admin/product/breed">
                <i class="el-icon-error"></i>
                <span slot="title">宠物类别</span>
              </el-menu-item>
            </el-submenu>
            <!-- 权限管理 -->
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-s-check"></i>
                <span>权限管理</span>
              </template>
              <el-menu-item index="/sys-admin/permission/admin" >
                <i class="el-icon-s-custom"></i>
                <span slot="title">管理员管理</span>
              </el-menu-item>
              <el-menu-item index="/sys-admin/permission/permission" >
                <i class="el-icon-s-opportunity"></i>
                <span slot="title">权限管理</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 下半部分的右侧：主体 -->
        <el-main class="layout-main">
          <!-- 将由其它视图组件来显示 -->
        <router-view/>
        </el-main>
        <el-dialog title="修改管理员密码" :visible.sync="dialogFormVisible">
          <el-form :model="editForm">
            <el-form-item label="用户名" :label-width="formLabelWidth" >
              <el-input v-model="editForm.username" autocomplete="off" readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="editForm.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary"  @click="submitEditForm">确 定</el-button>
          </div>
        </el-dialog>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        dialogFormVisible:false,
        activeMenuItemPath: '',
        formLabelWidth: '120px',
        editForm: {
          username:'',
          password:''
        },

        loginUser: {
          id: 9527,
          username: 'root',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }
      };
    },
    methods: {

      // 处理选中下拉菜单中的选项
      handleCommand(command) {
        if (command == 'openEditInfoDialog') {
         // this.openEditInfoDialog();
        } else if (command == 'openEditAvatarDialog') {
         // this.openEditAvatarDialog();
        } else if (command == 'openEditPasswordDialog') {
         this.openEditPasswordDialog();
        } else if (command == 'openLogoutConfirm') {
          this.openLogoutConfirm();
        }
      },

      loadLoginInfo() {
        let localJwt = localStorage.getItem('localJwt');
        console.log('localJwt='+localJwt)

        if (!localJwt) {
          localStorage.removeItem('localJwt');
          this.$router.push('/login');
          return;
        }
        let loginInfo =JSON.parse(localStorage.getItem('loginInfo'));
        if (!loginInfo || new Date() > loginInfo.tokenExpiration) {
          localStorage.removeItem('loginInfo');
          this.$router.push('/login');
          return;
        }
        this.loginUser.id =loginInfo.id;
        this.loginUser.username=loginInfo.username;
        this.loginUser.avatar=loginInfo.avatar;
        this.editForm.username=loginInfo.username;;
      },
      openEditPasswordDialog(){
        this.dialogFormVisible =true;
      },
      submitEditForm() {
        let url = 'http://localhost:9281/admin/updatePassword';
        console.log('url = ' + url);
        let formData = this.qs.stringify(this.editForm);
        console.log('formData = ' + formData);
        let localJwt =localStorage.getItem('localJwt');
        this.axios
            .create({
              'headers':{
                'Authorization':localJwt
              }
            })
            .post(url, formData).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.$message({
              message: '修改管理员密码成功！',
              type: 'success'
            });
            this.dialogFormVisible = false;
          } else if (jsonResult.state == 40400){
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
                this.dialogFormVisible = false;
                this.loadAlbumList();
              }
            });
          } else {
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
          }
        });
      },


      handleActiveMenuItem() {
        let currentPath = this.$router.currentRoute.path;

        if (currentPath.startsWith('/sys-admin/product/pet')) {
          currentPath = '/sys-admin/product/pet';
        }
        this.activeMenuItemPath = currentPath;
      },
      handleActiveMenuItemAttributeTemplate() {
        let currentPath = this.$router.currentRoute.path;
        if (currentPath.startsWith('/sys-admin/product/attributeTemplate')) {
          currentPath = '/sys-admin/product/attributeTemplate';
        }
        this.activeMenuItemPath = currentPath;
      },


      openLogoutConfirm() {
        let message = '即将退出登录，是否继续？';
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleLogout();
        }).catch(() => {
        });
      },
      handleLogout(){
        let url = 'http://localhost:9281/admin/logout';
        let localJwt = localStorage.getItem('localJwt');
        this.axios
            .create({
              'headers': {
                'Authorization': localJwt
              }
            })
            .post(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            localStorage.removeItem('loginInfo');
            localStorage.removeItem('localJwt');
            this.$router.push('/login');
          }
        });
      },
    },
    mounted() {
      this.handleActiveMenuItem();
      this.handleActiveMenuItemAttributeTemplate();
      this.loadLoginInfo();
    }
  }
</script>

<style>
  .layout-header {
    background: deepskyblue;
  }

  .layout-header h1 {
    line-height: 60px;
    color: white;
  }

  .layout-body {
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .layout-aside {
    background-color: cadetblue;
  }

  /*去除白边*/
  .layout-aside .el-menu {
    border: 0;
  }

  .layout-aside i {
    color: #fff !important;
  }

  /*选中颜色*/
  .el-menu-item.is-active {
    background: lightgrey !important;
  }

  .layout-header .login-user {
    float: right;
    display: flex;
    margin-top: 16px;
  }

  .layout-header .login-user .welcome {
    line-height: 28px;
    color: white;
  }
  .layout-main{
    background: white;
  }
</style>